<template>
	<div class="app">
		<h1>我是App组件</h1>
		<h3>我收到了Child1给我的电脑：{{computer}}</h3>
		<h3>我收到了Child1给我的手机：{{phone}}</h3>
		<br>
		<Child1 ref="child1" @send-computer="getComputer"/>
		<br>
		<Child2 @click.native="handleChild2Click"/>
	</div>
</template>

<script>
	import Child1 from './components/Child1'
	import Child2 from './components/Child2'

	export default {
		name:'App',
		components:{Child1,Child2},
		data() {
			return {
				a:1,
				computer:'',
				phone:''
			}
		},
		mounted() {
			this.$refs.child1.$once('send-phone',(p)=>{
				// console.log('有人触发了child1组件实例上的send-phone事件')
				this.phone = p
				console.log(this)
			})
		},
		methods: {
			getComputer(c){
				console.log('我是App组件，我收到了：',c)
				this.computer = c
			},
			getPhone(p){
				this.phone = p
			},
			handleChild2Click(val){
				console.log('handleChild2Click',val)
			}
		},
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 20px;
	}
</style>